<template>
  <!-- default-active="1" -->
  <el-menu :default-active="$route.path"
           :default-openeds="openedsList"
           router
           class="el-menu-vertical-demo">
    <el-submenu index="1">
      <template slot="title">
        <span class="submenu-txt">数据分析</span>
      </template>
      <el-menu-item-group>
        <div class="divider"></div>
        <el-menu-item style='overflow:hidden'
                      class="el-menu-show"
                      v-for="(nodeItem,index) in typeData"
                      :key="index"
                      :index="'/dataAnalysisShow/'+nodeItem.id"
                      :class="urlRoute == nodeItem.id ? 'is-active' : ''"
                      @click="changeType(nodeItem)">
          <span :class="urlRoute == nodeItem.id  ? 'el-button--primary' : 'work-order-dot'"></span>
          <span v-if="nodeItem.menuName.length <= 6">{{nodeItem.menuName}}</span>
          <el-tooltip class="item"
                      effect="dark"
                      :content="nodeItem.menuName"
                      placement="top"
                      v-else>
            <span>{{orderNameIntercept(nodeItem.menuName)}}</span>
          </el-tooltip>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <!-- <div class='strut'></div> -->
  </el-menu>
</template>
<script>
// import { selectByUserId } from '@/api/workOrderController'
export default {
  data () {
    return {
      loading: true,
      typeData: [
        {
          id: 1,
          menuName: '综合统计'
        },
        {
          id: 2,
          menuName: '客服工单统计'
        },
        // {
        //   id: 3,
        //   menuName: '工单实时监控'
        // }
      ],
      openedsList: ['1'],
      urlRoute: ''
    }
  },
  mounted () {
  },
  created () {
    var url = window.location.href
    let urls = url.split('/')
    this.urlRoute = urls[5]
  },
  computed: {

  },
  watch: {
    $route (to, from) {
      let urlRoutes = to.path
      urlRoutes = urlRoutes.split('/')
      this.urlRoute = urlRoutes[2]
      // this.$store.commit('orderTypeIdFun', this.urlRoute)
    }
  },
  methods: {
    orderNameIntercept (name) {
      return name.substring(0, 6) + '...'
    },
    changeType (val) {
      this.$store.commit('dataShowTypeTitleIdFun', val.id)
      this.$store.commit('orderTypeNameFun', val.menuName)
      this.urlRoute = val.id
    }
  }
}
</script>
<style scoped>
.submenu-txt {
  font-weight: 700;
  color: #231815;
  font-size: 13px;
  font-family: Microsoft YaHei;
  line-height: 0;
  padding: 0 16px;
}

.el-button--primary,.work-order-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 10px;
}
.work-order-dot {
  background-color: #c7c7c9;
}
.divider {
  height: 1px;
  width: 85%;
  background: #e2e2e2;
  margin: 0 auto 16px;
}

>>> .el-menu-item-group__title {
  padding: 0;
}

.el-menu-show {
  height: 40px;
  line-height: 40px;
}

.el-submenu .el-menu-item {
  padding: 0 36px !important;
}
</style>
